import React, { Component } from 'react';
import { observer, inject } from "mobx-react";
import { Dropdown, Menu, Icon } from 'antd';
import styles from './index.module.less';
import SearchInput from '../../components/SearchInput';
import Creator from './creator';

const SubMenu = Menu.SubMenu;

@inject(({ chatState, projectState, taskState, contactsState, commonState }) => ({ chatState, projectState, taskState, contactsState, commonState }))
@observer
class SearchBar extends Component {

    componentWillMount() {
        const { getTypes } = this.props.projectState;
        getTypes();
    }

    onOpenCreateProjectModal = ({ recname: projectname, recid: projecttype }) => {
        const { getStages } = this.props.projectState;
        const { onCreateProjectModalChange } = this.props.commonState;
        getStages({ projecttype });

        onCreateProjectModalChange({ projectModal: true, projecttype, projectname });
    }

    onCloseCreateProjectModal = () => {
        const { onCreateProjectModalChange } = this.props.commonState;
        onCreateProjectModalChange({ projectModal: false, projecttype: 1, projectname: undefined });
    }

    onOpenCreateTaskModal = () => {
        const { onCreateTaskModalChange } = this.props.commonState;
        onCreateTaskModalChange({ taskModal: true });
    }

    onCloseCreateTaskModal = () => {
        const { onCreateTaskModalChange } = this.props.commonState;
        onCreateTaskModalChange({ taskModal: false });
    }

    onOpenCreateContactModal = () => {
        const { onCreateContactModalChange } = this.props.commonState;
        onCreateContactModalChange({ contactModal: true });
    }

    onCloseCreateContactModal = () => {
        const { onCreateContactModalChange } = this.props.commonState;
        onCreateContactModalChange({ contactModal: false });
    }

    renderMenu(projectTypes) {
        return (
            <Menu>
                <SubMenu title="新建项目">
                    {projectTypes.map(v => <Menu.Item key={v.recid} onClick={() => this.onOpenCreateProjectModal(v)}>{v.recname}</Menu.Item>)}
                </SubMenu>
                <Menu.Item key="1" onClick={this.onOpenCreateTaskModal}>新建任务</Menu.Item>
                <Menu.Item key="2" onClick={this.onOpenCreateContactModal}>添加好友</Menu.Item>
            </Menu>
        );
    }

    render() {
        const { projectTypes } = this.props.projectState;
        const { add } = this.props;
        return (
            <div className={styles.searchHeader}>
                <SearchInput placeholder="搜索" global />
                {add ? (
                    <Dropdown overlay={this.renderMenu(projectTypes)} trigger={['click']}>
                        <Icon type="plus" className={styles.plus} />
                    </Dropdown>
                ) : null}
                <Creator
                    onCloseCreateProjectModal={this.onCloseCreateProjectModal}
                    onCloseCreateTaskModal={this.onCloseCreateTaskModal}
                    onCloseCreateContactModal={this.onCloseCreateContactModal}
                />
            </div>
        );
    }
}

export default SearchBar